<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#can{
				border:dashed 1px;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="500px" height="500px"></canvas>
		<script>
			//1.创建画布并获得
			var can = document.getElementById("can");
			//2.得到画笔
			var g = can.getContext("2d");
			//3.开启路径 清除之前的路径
			g.beginPath();
			//4.绘制路径
			g.moveTo(50,50);
			g.lineTo(450,450);
			//5.关闭路径 将路径形成封闭图案
			g.closePath();
			//6.绘制
			g.stroke();
			
			g.beginPath();
			g.moveTo(250,50);
			g.lineTo(250,450);
			g.strokeStyle = "red";
			g.lineWidth = 10;
			g.closePath();
			g.stroke();
			
			
			g.beginPath();						
			g.strokeStyle = "blue";			
			g.lineWidth = 1;
			g.strokeRect(50,100,100,100);
			g.closePath();
			g.stroke();
			
			g.beginPath();
			//g.globalAlpha = 0.5;
			g.fillStyle = "rgba(255,0,0,0.5)";
			g.fillRect(200,200,100,100);
			
			
			g.beginPath();
			g.arc(250,250,100,0,Math.PI/2,false);
			g.stroke();
			
			g.beginPath();
			g.fillStyle = '#c00';
			g.strokeStyle = '#c00';
			g.moveTo(75,40);
			g.bezierCurveTo(75,37,70,25,50,25);
			g.bezierCurveTo(20,25,20,62.5,20,62.5);
			g.bezierCurveTo(20,80,40,102,75,120);
			g.bezierCurveTo(110,102,130,80,130,62.5);
			g.bezierCurveTo(130,62.5,130,25,100,25);
			g.bezierCurveTo(85,25,75,37,75,40);
			g.fill();
			g.stroke();

			
		</script>
	</body>
</html>
